<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<div id="testElement"></div>

<script>

// Delete
test(function() {
  testElement.style.width = '80px';
  assert_equals(testElement.attributeStyleMap.get('width').toString(), '80px');

  testElement.attributeStyleMap.delete('width');
  assert_equals(testElement.attributeStyleMap.get('width'), null);
  assert_equals(testElement.style.width, '');
}, "delete() removes the value from the property when set in element.style");

test(function() {
  testElement.attributeStyleMap.set('width', new CSSUnitValue(100, 'px'));
  assert_equals(testElement.attributeStyleMap.get('width').toString(), '100px');

  testElement.attributeStyleMap.delete('width');
  assert_equals(testElement.attributeStyleMap.get('width'), null);
  assert_equals(testElement.style.width, '');
}, "delete() removes the value from the property when set in element.styleMap");

test(function() {
  testElement.style.width = '90px';
  assert_equals(testElement.attributeStyleMap.get('width').toString(), '90px');

  testElement.attributeStyleMap.delete('WIdtH');
  assert_equals(testElement.attributeStyleMap.get('width'), null);
  assert_equals(testElement.style.width, '');
}, "delete() works when mixed case is used for the property name");

test(function() {
  assert_equals(testElement.attributeStyleMap.get('height'), null);
  testElement.attributeStyleMap.delete('height');
  assert_equals(testElement.attributeStyleMap.get('height'), null);
}, "delete() does nothing if the property isn't set");

test(function() {
  assert_throws_js(TypeError, function() {
    testElement.attributeStyleMap.delete('lemons');
  });
}, "Attempting to delete an invalid property throws");

// TODO(meade): Test deleting a property containing multiple values once that has been implemented.

</script>
